<script type="text/javascript" src="<?php echo Yii::app()->request->baseUrl; ?>/js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="<?php echo Yii::app()->request->baseUrl; ?>/js/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="<?php echo Yii::app()->request->baseUrl; ?>/js/jquery.yiiactiveform.js"></script>   

<?php
foreach ($productos as $producto) {
    $dataProductos[$producto->idproductos] = $producto->vanombre;
}
?>

<div class="form">
    <?php /*
      $form = $this->beginWidget('CActiveForm', array(
      'id' => 'login-form',
      'enableClientValidation' => true,
      'enableAjaxValidation'=>true,
      'clientOptions' => array(
      'validateOnSubmit' => false,
      ),
      )); */
    ?>
    <div class="row">

        <?php echo CHtml::label('Productos', 'productos'); ?>
        <?php echo CHtml::dropDownList('producto', 'producto', $dataProductos) ?>     
    </div>

    <div class="row">
        <?php echo CHtml::label('Cantidad', 'cantidad'); ?>
        <?php echo CHtml::textField('cantidad', '1'); ?>
    </div>

    <div class="row buttons">        
        <button id="agregar">Agregar</button>
        <!--<div id="agregar" class="button">Agregar</div>-->
    </div>  
    <!--    <div class="row buttons">
    <?php echo CHtml::submitButton('Registrar'); ?>
        </div>-->

    <?php /* $this->endWidget(); */ ?>
</div><!-- form -->
<button onclick="guardarHojaPedido()">Guardar</button>
<div class="large-12">

    <table>
        <thead>
        <th>C&oacute;digo</th>
        <th>Nombre</th>
        <th>Cantidad</th>
        <th>Estado</th>
        </thead>
        <tbody id="listaProductos">
        </tbody>
    </table>

</div>

<script type="text/javascript">
    var contador = 0;
    // Agregar Producto
    $("#agregar").click(function() {
        /*
         * Se crean los objetos
         * @params object objetoCantidad
         * @params object objetoCodigo
         * @params object objetoProducto
         */
        var objetoCantidad = $("#cantidad");
        var objetoProducto = $("#producto option:selected");
        var objetoCodigo = $("#producto");

        var producto = objetoProducto.html();
        var cantidad = objetoCantidad.val();
        var codigo = objetoCodigo.val();
        if (cantidad != 0) {

            if (!ExisteProducto(codigo, cantidad)) {

                var input = $("#tmplProducto").tmpl({
                    contador: contador,
                    producto: producto,
                    cantidad: cantidad,
                    codigo: codigo
                });
                $("#listaProductos").append(input);
                cantidad++;
            }

        } else {
            objetoCantidad.focus();
        }

    });
    // Eliminar Producto
    function eliminar(identificador) {
        $("#producto_" + identificador).remove();
    }
    function ExisteProducto(codigo, cantidad) {
        /* Se valida si el codigo existe
         * @param codigo int
         * @param cantidad int
         * return bool
         * */
        var retorno = false;
        var objCodigo = $("table").find("input.codigo");

        $.each(objCodigo, function(index, value) {

            var valorInt = parseInt($(value).val());
            if (valorInt == codigo) {
                var valor1 = $("#inputCantidad_" + codigo).val();
                var total = parseInt(valor1) + parseInt(cantidad);
                $("#inputCantidad_" + codigo).val("");
                $("#inputCantidad_" + codigo).val(total);
                retorno = true;
            }
        });
        return retorno;
    }

    function guardarHojaPedido() {

        var todo = [];
        var temp2;
        var objetoCodigo = $("table").find(".codigo");
        var objetoCantidad = $("table").find(".cantidad");

        $.each(objetoCodigo, function(index, value) {
            var tmp1= $(value).val();

            $.each(objetoCantidad, function(index2, value) {
                if (index2 == index) {
                    temp2= $(value).val();
                    return ;
                }
            });
            todo.push({codigo:tmp1,cantidad:temp2});
        });

        var myJsonString = JSON.stringify(todo);

        $.ajax({
            url: "createHojaPedido",
            type: "POST",
            data: {datos: myJsonString},
            context: this,
            error: function() {
            },
            dataType: 'json',
            success: function(response) {
            }
        });


    }
</script>
<!--Template listaProductos-->
<script id="tmplProducto" type="text/x-jquery-tmpl">
    <tr id="producto_${contador}">
    <td><input type="text" disabled="" value="${codigo}" class="codigo" id="inputCodigo_${codigo}"></td>
    <td><input type="text" disabled="" value="${producto}"></td>
    <td><input type="text" disabled="" value="${cantidad}" class="cantidad" id="inputCantidad_${codigo}"></td>
    <td><button onclick="eliminar('${contador}')" >Retirar</button></td>
    </tr>
</script>
